import React, { useState, useMemo } from 'react'

const App = () => {
  const [count, setCount] = useState(100)
  const [theme, setTheme] = useState('lightseagreen')

  // 模拟昂贵计算的函数
  const computeExpensiveValue = (count: number) => {
    console.log('昂贵计算的函数执行了')
    // 创建数组长度为 count 的数组，并填充数组的每个元素值为 100
    const numArrs = new Array(count).fill(100)
    // 计算数组中所有元素的和
    return numArrs.reduce((total, item) => total + item, 0)
  }

  // useMemo:
  // 除了可以记忆任意数据，在组件更新期间保持数据（一般是对象类型）引用相等外，还有其他使用场景。
  // 更重要的使用场景：如果数据是通过昂贵的计算得到的，可以通过 useMemo 记忆计算结果，直到依赖项发生改变。
  // 从而，避免重复计算，提升性能。

  // 不使用 useMemo Hook：组件每次更新时都会重新执行该函数中的代码，造成重复计算
  // const value = computeExpensiveValue(count)

  // 使用 useMemo 来记忆昂贵计算的结果，来避免重复的执行，从而提升组件的性能
  const value = useMemo(() => computeExpensiveValue(count), [count])

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button
        onClick={() => setTheme(theme === 'lightseagreen' ? 'lightskyblue' : 'lightseagreen')}
      >
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <div>昂贵计算的演示：{value}</div>
    </div>
  )
}

export default App
